<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" href="../assets/agile/css/ratchet/css/ratchet.min.css">
    <link rel="stylesheet" href="../assets/agile/css/flat/flat.component.css">
    <link rel="stylesheet" href="../assets/agile/css/flat/flat.color.css">
    <link rel="stylesheet" href="../assets/agile/css/flat/iconline.css">
    <link rel="stylesheet" href="../assets/app/css/app.css" />
    <style type="text/css">
    html,body{
        height: 100%;
    }
    #wrap{
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
        flex-flow: column;
    }
    #header,#cart,#list,#user,#lastnew{
        text-align: center; background-color: #fff; color: #fff;
        width: 100%;
    }
    #cart,#list,#user,#lastnew,#listTop,#lastnewTop,#cartTop,#userTop{
        display: none;
    }
    .titlebar{text-align: center; background-color: #c40c00; color: #fff;}
    #header h1,#cart h1,#list h1,#user h1,#lastnew h1{
        font-size: 20px; height: 44px; line-height: 44px; margin: 0em; color: #fff;
    }
    #main{
        -webkit-box-flex: 1; 
        -webkit-flex: 1;
        flex: 1;
    }
    #footer{
        height: 51px;
        background-color: #81a9c3; 
        width: 100%;
        text-align: center;
    }
    #footer h5{
        color: white;
    }
    .con{font-size: 28px; text-align: center;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="topbox" style="background:#c40c00;">
            
            <div id="header">
                <header class="titlebar" id="homeTop">
                <a href="javascript:cate();"><i class="iconfont iconline-menu"></i></a>
                <h1>商城 – 买新品</h1>
                <a class="icon icon-search pull-right index-icon-search" href="javascript:search('search');" style="font-size:24px;margin-top:8px;display:none;"></a>
                </header>
                
                <header class="titlebar" id="listTop">
                <a href="javascript:cate();"><i class="iconfont iconline-menu"></i></a>
                <input type="text" id="keywords" name="keywords" placeholder="输入您要搜索的商品" class="search">
                <button id="clickSearch" style="width:16%;float:right;margin-right:8px;background:#f6f6f6;color:#333;height:32px;line-height:32px;margin-top:5px;">搜索</button>
                </header>
                
                <header class="titlebar" id="lastnewTop">
                <a href="javascript:cate();"><i class="iconfont iconline-menu"></i></a>
                <h1>最新揭晓</h1>
                <a class="icon icon-search pull-right index-icon-search" href="javascript:search('search');" style="font-size:24px;margin-top:8px;"></a>
                </header>
                
                <header class="titlebar" id="cartTop">
                <a href="javascript:cate();"><i class="iconfont iconline-menu"></i></a>
                <h1>购物车</h1>
                <a class="iconfont iconline-trash2" id="clearCart" href="javascript:;" style="font-size:24px;margin-top:22px;float: right;"></a>
                </header>
                
                <header class="titlebar" id="userTop">
                <a href="javascript:cate();"><i class="iconfont iconline-menu"></i></a>
                <h1>我的</h1>
                </header>
                
            </div>
        </div>
        <div id="main">
                
        </div>
        <div id="footer">
            <nav class="bar bar-tab">
                <a class="tab-item active" tapmode="hover" onclick="changePage(0,true);">
                    <span class="icon iconline-home"></span>
                    <span class="tab-label">首页</span>
                </a>
                <a class="tab-item" tapmode="hover" onclick="changePage(1,true);">
                    <span class="icon iconline-grid"></span>
                    <span class="tab-label">所有商品</span>
                </a>
                <a class="tab-item" tapmode="hover" onclick="changePage(2,true);">
                    <span class="icon iconline-bulb"></span>
                    <span class="tab-label">最新揭晓</span>
                </a>
                <a class="tab-item head-shopcart" tapmode="hover" onclick="changePage(3,true,true);">
                    <span class="icon iconline-shop-basket"></span>
                    <span class="tab-label">购物车</span>
                    <em class="footer_goods_num">2</em>
                </a>
                <a class="tab-item" tapmode="hover" onclick="changePage(4,true,true);">
                    <span class="icon iconline-uid"></span>
                    <span class="tab-label">我的</span>
                </a>
            </nav>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript" src="../script/local.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
$(function(){
	$('#clickSearch').click(function(){
		var keywords = $('#keywords').val();
		if(keywords == ''){
		api.alert({
		    title: '提示',
		    msg: '输入您要搜索的商品',
		}, function(ret, err) {
		
		});
		return false;
		}
		localData.set('search_keywords',keywords);
		api.openWin({
		    name: 'search',
		    url: './search.html',
		    pageParam: {
		        name: keywords
		    }
		});
	});
});
function funcGoto(){
    api.closeFrame({
        name: 'cate'
    });
	api.setFrameGroupIndex({
	    name: 'group1',
	    index: 3,
	    scroll: true,
	    reload: true
	});
}

function funcGotoUser(){
	api.setFrameGroupIndex({
	    name: 'group1',
	    index: 4,
	    scroll: true,
	    reload: true
	});
}

function funcClose(){
	setTimeout(function(){
		api.closeWin({
		    name: 'dataserver',
		});
	},500);
}

function funcA(){
	setTimeout(function(){
		api.closeWin({name:'z_item'});
	},500);
}

function funcB(){
	setTimeout(function(){
		api.closeWin({name:'f_item'});
		api.closeWin({name:'userbuydetail'});
		api.closeWin({name:'userbuylist'});
	},500);
}

function funcC(){
	setTimeout(function(){
		api.closeWin({name:'gbuy'});
	},500);
}

function funcD(){
	setTimeout(function(){
		api.closeWin({name:'team_payment'});
	},750);
}

function funcF(){
	setTimeout(function(){
		api.closeWin({name:'team_item'});
	},650);
}

function funcTx(){
	setTimeout(function(){
		api.closeWin({name:'join_payment'});
	},750);
}

function CommonClose(page){
	setTimeout(function(){
		api.closeWin({name:page});
	},750);
}

apiready = function(){
	
		if(api.systemType == 'ios'){
			$('#keywords').attr('style','margin:23px auto 0 13px;border:none;height:auto;line-height:normal;width:55%;padding:6px 8px;color:#333');
		}else{
			$('#keywords').attr('style','margin:28px auto 0 13px;border:none;height:auto;line-height:normal;width:55%;padding:6px 8px;color:#333');
		}
	
        var header = $api.byId('header');
        var topbox = $api.byId('topbox');
        
        //适配iOS 7+，Android 4.4+状态栏
        //$api.fixStatusBar(header);
        $api.fixStatusBar(topbox);
        var headerPos = $api.offset(topbox);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);  
api.openFrameGroup ({
    name: 'group1',
    background: '#fff',
    scrollEnabled: false,
    rect: {
         x: 0, 
         y: headerPos.h, 
         w: 'auto', 
         h: mainPos.h
    },
    index: 0,
    frames: [{
        name: 'frame1', 
        url: './copy_home.html',
        bgColor: '#fff',
        bounces:true
    },{
        name: 'frame2', 
        url: './list.html', 
        bgColor: '#fff',
        bounces:true
    },{
        name: 'frame3', 
        url: './lastnew.html', 
        bgColor: '#fff',
        bounces:true
    },{
        name: 'frame4', 
        url: './cart.html', 
        bgColor: '#fff',
        bounces:true
    },{
        name: 'frame5', 
        url: './user.html', 
        bgColor: '#fff',
        bounces:true
    }]
}, function( ret, err ){
    if( ret ){
         //alert( JSON.stringify( ret ));
         $('#footer nav a').removeClass('active');
         $('#header header').each(function(index){
             if(ret['index'] == index){
                $(this).show();
                $('#footer nav a').eq(index).addClass('active');
             }else{
                $(this).hide();
             }
         });
         
    }else{
         //alert( JSON.stringify( err ) );
    }
       
});      

  setInterval(getCount,1000);
  
  if(localData.get('userinfo')){
	  localData.set('user_is_login',1);
  }else{
	  localData.set('user_is_login',0);
  }
  
  
};

var isopenCate = {
	
};
//商品分类
function cate(){
    var header = $api.byId('header');
    //适配iOS 7+，Android 4.4+状态栏
    $api.fixStatusBar(header);
    var headerPos = $api.offset(header);
    var main = $api.byId('main');
    var mainPos = $api.offset(main);
    api.openFrame({
        name: 'cate',
        url: './cate.html',
        rect: {
            x: 0,
            y: 0,
            w: 'auto',
            h: 'auto'
        },
        pageParam: {
            name: 'cate'
        },
        bounces: false,
        bgColor: 'rgba(0,0,0,0)',
        vScrollBarEnabled: true,
        hScrollBarEnabled: false
    });
}
	
	function search(){
		api.openWin({
		    name: 'search',
		    url: './search.html',
		    pageParam: {
		        name: 'search'
		    }
		});
	}

    function changePage(index,scroll,reload){
		if(index == 4){
			if(!getUserinfo()){
				localData.set('reload','user');
				api.openWin({
				    name: 'login',
				    url: './login.html',
				    pageParam: {
				        name: 'test'
				    }
				});
				return;
			}
		}
        if(scroll != true){
            scroll = false;
        }
        if(reload != true){
            reload = false;
        }
        api.setFrameGroupIndex({
            name: 'group1',
            index: index,
            scroll: scroll,
            reload:reload
        });
    }
    
    /**
     *获取购物车数量
     *购物数量保存本地并返回数量 
     */
    function getCount(){
        var cart = localData.get('cart');
        if(!cart){
            $('.footer_goods_num').text(0).hide();
            return;
        }
        cart = $.parseJSON(cart);
        var num = 0;
        if((typeof cart) == 'object'){
            for(var i in cart){
                num++;
            }
        }
        localData.set('cart_num',num);
        if(num == 0){
            $('.footer_goods_num').text(num).hide();
            return;
        }
        $('.footer_goods_num').text(num).show();
    }
    
    //清空购物车
    $('#clearCart').click(function(){
    	api.confirm({
    	    title: '提示',
    	    msg: '是否清空购物车？',
    	    buttons: ['确定', '取消']
    	},function( ret, err ){
    	    if( ret ){
    	    	if(ret['buttonIndex'] == 1){
    	            localData.remove('cart');
    	            localData.remove('cart_num');
    	            changePage(3,true,true);
    	    	}else{
    	    		//
    	    	}
    	    }else{
    	         //alert( JSON.stringify( err ) );
    	    }
    	});
    });
        
    function randomSwitchBtn(page){
        var main = $api.byId('main');
        var mainPos = $api.offset(main);
        var frameName = 'main';
        if(page != 'copy_home'){
            $('#topbox div').each(function(){
                if($(this).attr('id') == page){
                    $(this).show();
                }else{
                    $(this).hide();
                }
            });
            var header = $api.byId(page);
            frameName = page;
        }else{
            $('#list,#lastnew,#cart,#user').hide();
            $('#header').show();
            var header = $api.byId('header');
        }
        //适配iOS 7+，Android 4.4+状态栏
        //$api.fixStatusBar(header);
        var headerPos = $api.offset(header);
        /*
        api.openFrame({
            name: frameName,
            url: 'html/'+page+'.html',
            bounces: true,
            rect: {
                x: 0,
                y: headerPos.h,
                w: 'auto',
                h: mainPos.h
            }
        });
        */
};
  
</script>
</html>